<template>
    <div>
        <el-form label-width="120px" size="small" ref="formRef" :model="form" :rules="formRules">
            <el-form-item label="短剧主id:" prop="title" required>
                <el-input v-model="videoId" disabled />
            </el-form-item>
            <el-form-item label="视频标题:" prop="title" required>
                <el-input v-model="form.title"  />
            </el-form-item>
            <el-form-item label="视频背景图:" prop="image" required>
                <material-select :limit="1" v-model="form.image" />
                <div class="flex">
                    <div class="muted xs m-r-16">建议尺寸：280*180像素，jpg，jpeg，png图片类型</div>
                </div>
            </el-form-item>
            <el-form-item label="视频上传">
                <input type="file"  @change="onVideoChange" accept="video/*" />
            </el-form-item>
            <el-form-item label="普通会员价:" prop="price" required>
                <el-input v-model="form.price"  />
            </el-form-item>
            <el-form-item label="vip会员价:" required>
                <el-input v-model="form.vip_price"  />
            </el-form-item>
            <el-form-item label="权重:" prop="title" required>
                <el-input v-model="form.sort" />
            </el-form-item>
            <el-form-item label="状态:" required>
                <el-radio :label="1" v-model="form.is_show" >显示</el-radio>
                <el-radio :label="2" v-model="form.is_show" >隐藏</el-radio>
            </el-form-item>
            <el-form-item label="类型:" required>
                <!-- 类型:1视频 2音频 3文章 -->
                <el-radio :label="1" v-model="form.type" >视频</el-radio>
                <el-radio :label="2" v-model="form.type" >音频</el-radio>
                <el-radio :label="3" v-model="form.type" >文章</el-radio>
            </el-form-item>
            <el-form-item label="介绍:" prop="introduction" required class="form-edit">
                <!-- <el-input v-model="form.introduction" :disabled="disabled" /> -->
                <!-- <editor v-model="form.introduction" lazy width="600" height="300"/> -->
                <editor lazy v-model="form.introduction" width="375" height="300" />
            </el-form-item>
            <el-form-item label="身份设置可观看:" required>
                <el-checkbox-group v-model="form.distribution_level_ids">
                    <el-checkbox v-for="item in distributionLevelList" :key="item.id" :label="item.id">
                        {{ item.name }}</el-checkbox
                    >
                </el-checkbox-group>
            </el-form-item>
        </el-form>

    </div>
</template>

<script lang="ts">

import { Component, Vue, Prop, Ref } from 'vue-property-decorator'
import { PageMode } from '@/utils/type'
import { joinDistributionLevel, joinVideoEpisodeAdd, joinVideoEpisodeEdit } from '@/api/visionapi/index'
import MaterialSelect from '@/components/material-select/index.vue'
import Editor from '@/components/editor.vue'
import {
    IVideoEpisodeAddForm,
    IVideoEpisodeEditForm,
    IDistributionLevelItem,
    IFormDistributionLevelItem
} from './video.interface'
import { STATIC_VIDEO_EPISODE_ADD_FORM_VALUE } from './const'
@Component({
    components: {
        MaterialSelect,
        Editor
    }
})
export default class VideoEpisodeAdd extends Vue {
    @Prop({default: ''}) videoId!: String
    @Prop({default: PageMode.ADD}) mode!: string
    @Prop({default: []}) distributionLevelIds!: IFormDistributionLevelItem[]
    @Prop({
        default() {
            return {}
        }
    })
    editInfo!: IVideoEpisodeEditForm | null
    distributionLevelList:IDistributionLevelItem[] = []
    form:IVideoEpisodeAddForm = {
        ...STATIC_VIDEO_EPISODE_ADD_FORM_VALUE,
    }
    formRules = {
        title: [
            {
                required: true,
                message: '请填写标题',
                trigger: 'blur'
            }
        ],
        category_id: [
            {
                required: true,
                message: '请填写分类',
                trigger: 'blur'
            }
        ],
        area_id: [
            {
                required: true,
                message: '请填写区域',
                trigger: 'blur'
            }
        ],
        image: [
            {
                required: true,
                message: '请上传视频背景图',
                trigger: 'blur'
            }
        ],
        year_id: [
            {
                required: true,
                message: '请选择视频年份',
                trigger: 'blur'
            }
        ],
        number: [
            {
                required: true,
                message: '请填写集数',
                trigger: 'blur'
            }
        ],
        price: [
            {
                required: true,
                message: '请填写普通会员价',
                trigger: 'blur'
            }
        ],
        vip_price: [
            {
                required: true,
                message: '请填写VIP会员价',
                trigger: 'blur'
            }
        ],
        introduction: [
            {
                required: true,
                message: '请填写视频介绍',
                trigger: 'blur'
            }
        ]
    }
    // 添加
    $refs!: {
        formRef: any
    }
    created() {
        this.joinDistributionLevelHandler()
    }
    mounted() {
        const vm = this
        this.$nextTick(() => {

            vm.initFormInfo()
        })
        
    }
    initFormInfo() {
        const vm = this
        if (this.mode === PageMode.ADD) {
            vm.form = Object.assign({}, vm.form, {
                distribution_level_ids: this.distributionLevelIds.map(item => item.distribution_level_id),
                introduction: vm.form.title,
                video_path: 'https://new.qq.com/rain/a/20230607V09HQF00?qudao=123sogou&hideNavbar=1'
            })
            return
        }
        this.form = Object.assign({}, STATIC_VIDEO_EPISODE_ADD_FORM_VALUE, vm.editInfo, {
            distribution_level_ids: this.distributionLevelIds.map(item => item.distribution_level_id),
            introduction: vm.editInfo?.introduction,
            video_path: 'https://new.qq.com/rain/a/20230607V09HQF00?qudao=123sogou&hideNavbar=1'
        })
    }
    // 请求到的分销列表数据
    joinDistributionLevelHandler() {
        joinDistributionLevel({})
            .then(res => {
                const lists = res.lists || []
                this.distributionLevelList = lists
            })
            .catch(err => {
                this.distributionLevelList = []
            })
    }
    onSubmit() {
        this.$refs.formRef.validate((valid: boolean): any => {
            if (!valid) {
                return
            }

            // 请求发送
            switch (this.mode) {
                case PageMode.ADD:
                    // 添加
                    return this.addViedoHandler()
                case PageMode.EDIT:
                    // 编辑
                    return this.editVideoHandler()
                default:
                    // no default
            }
        })
    }
    onVideoChange() {
        
       
    }
    getRequestConfig() {
        const vm = this
        const keys = [...Object.keys(STATIC_VIDEO_EPISODE_ADD_FORM_VALUE)]
        keys.push('id')
        const distribution_level_ids = JSON.parse(JSON.stringify(this.form.distribution_level_ids, keys))
        let QueryConfigDistributionLevelList = []
        if (this.mode === PageMode.ADD) {
            QueryConfigDistributionLevelList = distribution_level_ids.map((item: number | string) => {
                return {
                    distribution_level_id: item
                }
            })
        } else {
            QueryConfigDistributionLevelList = distribution_level_ids.map((item: number | string) => {
                const activeSelectId = String(item)
                const obj: {id?: string|number} = {}
                const editActiveItem = vm.distributionLevelIds.find(item => String(item.distribution_level_id) === activeSelectId)
                if (editActiveItem) {
                    obj['id'] = editActiveItem.id
                }
                return {
                    ...obj,
                    distribution_level_id: item
                }
            })
        }
        const QueryConfig = {
            video_id: vm.videoId,
            ...JSON.parse(JSON.stringify(this.form, keys)),
            distribution_level_ids: JSON.stringify(QueryConfigDistributionLevelList)
        }
        return QueryConfig
    }
    addViedoHandler() {
        const config = this.getRequestConfig()
        joinVideoEpisodeAdd(config).then((res) => {
            this.successHandler()
        }).catch((err: Error) => {
            console.log(err)
        })
    }
    editVideoHandler() {
        const config = this.getRequestConfig()
        console.log('config', config, this.distributionLevelIds, this.form.distribution_level_ids)
        joinVideoEpisodeEdit(config).then((res) => {
            this.successHandler()
        }).catch((err: Error) => {
            console.log(err)
        })
    }
    successHandler() {
        this.$emit("success")
    }
}
</script>